<template>
  <div>
    <div class="search">
      <el-select placeholder="请选择维修类型查询" style="width: 200px; margin-right: 10px" v-model="repairType">
        <el-option v-for="item in repairTypeList" :key="item.id" :value="item.type"></el-option>
      </el-select>
      <el-select placeholder="请选择维修状态查询" style="width: 200px; margin-right: 10px" v-model="repairStatus">
        <el-option v-for="item in statusList" :key="item.id" :value="item.type"></el-option>
      </el-select>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="table">
      <el-table :data="repair" strip @row-click="handleRowClick">
        <el-table-column v-if="false" prop="id" label="序号" width="70" align="center" sortable></el-table-column>
        <el-table-column prop="repairNumber" label="报修单号"></el-table-column>
        <el-table-column prop="buildingNumber" label="楼号"></el-table-column>
        <el-table-column prop="repairAddress" label="报修地址"></el-table-column>
        <el-table-column prop="reporter" label="报修人"></el-table-column>
        <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkerRepairCheck",
  data() {
    return {
      repair: [
        {
          id: 1,
          repairNumber: '12345',
          buildingNumber: 'A1',
          repairAddress: '某某地址',
          reporter: '张三',
          contactPhone: '123456789',
          repairType: '电路问题',
          repairContent: '电路短路需要维修',
          repairStatus:'已分配',
          repairPerson1:'维修员A',
          repairPerson1Phone:'111111',
          repairPerson2:'维修员B',
          repairPerson2Phone:'22222',
          rating:0,
          comments: '', 
          pictures:[],         
          reportImages: [
            'http://localhost:9090/files/1733649497371-1733648955008-用例图.jpg',
            'http://localhost:9090/files/1733649497371-1733648955008-用例图.jpg',
          ],
          repairImages: [
            'http://example.com/uploads/image1.jpg',
            'http://example.com/uploads/image1.jpg',
          ],
        },
      ],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 1,
      repairType: null,
      repairStatus: null,
      fromVisible: false,
      repairInfoVisible: false,
      repairInfo: {},
      repairDetailsVisible: false,
      repairDetails: {
        pictures:[]
      },
      evaluationVisible: false,
      evaluationForm: {
        rating: 0,
        comments: ''
      },
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      ids: [],
      rules:{}
    }
  },
  computed: {
    isMobile() {
      return window.innerWidth < 768;
    },
  },
  created() {
    this.load(1);
    this.fetchRepairTypes();
    this.fetchStatuses();
  },
  methods: {
    fetchRepairTypes() {
      this.$request.get('/category/selectAll').then(res => {
        this.repairTypeList = res.data || [];
      });
    },
    fetchStatuses() {
      this.$request.get('/state/selectAll').then(res => {
        this.statusList = res.data || [];
      });
    },
    load(pageNum) {
      this.pageNum = pageNum;
      this.$request.get('/worker/repair/selectPage', {
        params: { pageNum, pageSize: this.pageSize, repairType: this.repairType, repairStatus: this.repairStatus, },
      }).then(res => {
        this.repair = res.data?.list || [];
        this.total = res.data?.total || 0;
      });
    },
    reset() {
      this.repairType = null;
      this.repairStatus = null;
      this.load(1);
    },
    handleSelectionChange(rows) {
      this.ids = rows.map(v => v.id); // 获取选中项的 ID
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    handleAvatarSuccess(response, file, fileList) {
      // 把头像属性换成上传的图片的链接
      if (Array.isArray(this.repairDetails.pictures)) {
        this.repairDetails.pictures.push(response.data);
      } else {
        console.error('this.form.picture is not an array!');
        // 你可能需要在这里重置this.form.picture为一个数组
        this.repairDetails.pictures = [response.data]; // 或者根据需要处理
      }
    },
    // 点击表格行跳转新页面的方法
    handleRowClick(row) {
      this.$router.push({ name: 'WorkerRepairDetail', params: { repair: row } });
    }
  }
}
</script>

<style scoped>
/* 手机端表格滚动 */
@media (max-width: 767px) {
  .table {
    overflow-x: auto;
  }
}
</style>